// 航班列表

<template>
  <section class="container">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <!-- 过滤组件需要获取到数据再显示，不然会报错 -->
        <div class="filters">
          <FlightsFliter
            v-if="filtersData.info"
            :fData="filtersData"
            @filterData="setFilterData"
          />
        </div>
        <!-- 航班头部布局--组件 -->
        <FlightsListHead />

        <!-- <div class="flightsHead">
          <el-row>
            <el-col :span="6">航空信息</el-col>
            <el-col :span="6">起飞时间</el-col>
            <el-col :span="6">到达时间</el-col>
            <el-col :span="6">价格</el-col>
          </el-row>
        </div> -->

        <!-- 航班信息列表--组件 -->
        <div class="flightsList">
          <FlightsItem
            v-for="(item, index) in PageData"
            :key="index"
            :flightData="item"
          />
          <div class="tip" v-if="flightsList && flightsList.length == 0">
            暂无数据！请走路
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="flightsList.length"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <FlightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 所有机票数据
      flightsList: [],
      PageData: [], // 当前页的列表数据
      pageIndex: 1,
      pageSize: 5,
      filtersData: {}, // 这是要传递给filghtsFilter.vue的数据对象
    };
  },
  methods: {
    setFilterData(arr) {
      // 根据过滤结果，重新渲染页面
      this.flightsList = arr;
      this.getPageData();
    },
    // 修改每页几个数据
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.getPageData();
    },
    // 切换页码
    handleCurrentChange(val) {
      console.log(val);
      this.pageIndex = val;
      this.getPageData();
    },
    getPageData() {
      this.PageData = this.flightsList.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageIndex * this.pageSize
      );
    },
    //原来的代码 let start = (this.pageIndex - 1) * this.pageSize; //第一个数据
    // let end = start + this.pageSize; //最后一个数据
    // // 说明：由于slice（）接口不会修改原数据，所以可以直接在原数据调用
    // this.PageData = this.flightsList.slice(start, end);
    // console.log(this.flightsList.length);
    // console.log(this.PageData);

    // 请求获取数据渲染页面
    getData() {
      console.log(this.$route.query);
      // 发起请示获取机票列表数据
      // JiPiao - 机票列表 http:127.0.0.1:1337/airs
      this.$axios({
        url: "/airs",
        params: this.$route.query,
      }).then((res) => {
        console.log(res);
        this.flightsList = res.data.flights;
        this.filtersData = res.data;
        // console.log(this.filtersData);
        // 根据分页情况渲染
        this.getPageData();
      });
    },
  },
  // 监听路由变化，一旦变化重新请求数据
  watch: {
    $route(to,from) {
      this.getData();
    },
  },
  mounted() {
    // console.log(this.$route.query); // this.form对象
    // 请求获取数据渲染页面
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
  .flights-content {
    width: 745px;
    font-size: 14px;
    .filters {
      margin-bottom: 20px;
    }
    .flightsList {
      .tip {
        text-align: center;
        background-color: #eee;
        padding: 10px 0;
      }
    }
  }
  .aside {
    width: 240px;
  }
}
</style>